Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Cкрипт позволяет преобразить вид стандартного поля для ввода тегов. Данный скрипт можно использовать не только для тегов, но и для полей с ключевыми словами.

Требования к установке:
• jQuery 1.7.2+ (подключается автоматически в Общих настройках сайта)
• jQuery UI 1.8.12+

Первый шаг: загрузка файлов на сайт

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js. Кликните на галочку и ура, мы создали папку с нужным именем!:) Теперь абсолютно идентичным действиям создайте папку, но только с названием css.

Теперь зайдите в папку js и загрузите в эту папку файлы "utags.js" и "jquery-ui.js" из архива со скриптом (папка "скрипты").
Далее, перейдите в папку CSS и загрузите в неё все файлы, которые находятся в архиве со скриптом (папка "стили").

Второй шаг: установка кода

Перейдите в Панель управления » Управление дизайном и выберите шаблон "Страница добавления/редактирования материала" того модуля, в который хотите установить скрипт.

Перед тегами </body></html> установите код:

<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/utags.js"></script>

Далее между тегами заголовка head установите CSS:

<link type="text/css" rel="StyleSheet" href="/css/utags.css">

Вы можете подключить один из нескольких файлов css, каждый из которых имеет светлые, темные, синие цвета.

Третий шаг: настройка и использование

Перейдите в Панель управления » Управление дизайном и выберите шаблон "Страница добавления/редактирования материала" того модуля, в который хотите установить скрипт.

Перед закрывающим тегом body установите скрипты:

 <script>
 $("#suggEdit").utags();
 </script> 

Где: #suggEdit является идентификатором поля тегов. Если вы хотите установить скрипт для другого поля, то посмотрите через инструменты разработчика в браузере (вызывается кнопкой F12) какой идентификтор прописан у поля.

Если идентификтора нет, то можно прописать имя поля

 <script>
  $('[name="tags"]').utags();
 </script>

Опции

---

Опции позволяют изменить настройки скрипта по умолчанию. Настройки указываются следующим способом:

$("#suggEdit").utags({
	name1: value1,
	name2: value2,
	...
	nameN: valueN
});

Где: name - имя опции, value - значение опции.

placeholder (string)

Указание текста внутри поля, который задается атрибутом html - placeholder. Текст исчезает при получении фокуса.

Пример:

$("#suggEdit").utags({
	placeholder: 'Введите теги через запятую'
});

allowDuplicate (boolean)

Указывает, можно дублировать теги или нельзя. Может принимать два значения: true и false. По умолчанию запрещено: false.

Пример:

$("#suggEdit").utags({
	allowDuplicate: true
});

showDuplicate (boolean)

Указывает на дубликат тега. Может принимать два значения: true и false. По умолчанию разрешено: true.

Пример:

$("#suggEdit").utags({
	showDuplicate: true
});

buttonClear (boolean)

Показывать кнопку очистки поля тегов. Может принимать два значения: true и false. По умолчанию запрещено: false.

Пример:

$("#suggEdit").utags({
	buttonClear: true
});

readOnly (boolean)

Запрещает или разрешает изменение поля. Может принимать два значения: true и false. По умолчанию запрещено: false. Поле доступно для чтения и записи.

Пример:

$("#suggEdit").utags({
	readOnly: true
});

Методы

---

tagAll()

Получение всех тегов в поле. Теги возвращаются в виде массива

Пример:

$("#suggEdit").utags('tagAll');
["ucoz", "uscript", "unicron", "utags", "теги"] 

clickedTag()

Срабатывает, при клике по тегу

Пример:

$("#suggEdit").utags({
	clickedTag: function() {
		alert('Вы произвели нажатие по тегу!');
	}
});

removeTag()

Срабатывает, при удалении тега

Пример:

$("#suggEdit").utags({
	removeTag: function() {
		alert('Тег удален!');
	}
});

clearTag()

Срабатывает, при очистке тегов

Пример:

$("#suggEdit").utags({
	clearTag: function() {
	alert('Тег удален!');
	}
});